<template>
  <div class="container">
    <div class="app-container">
      <!-- 卡片区域 -->
      <el-card shadow="never" class="box-card">
        <el-form :model="subject" ref="subjectRef">
          <div class="filter-container">
            <!-- 表格 -->
            <el-form-item>
              <el-input
                @keyup.enter="handleFilter"
                style="width: 200px"
                class="filter-item"
                v-model="subject.subjectName"
              ></el-input>
              <el-button
                class="filter-item container-but"
                size="small"
                @click="resetForm"
                >清除</el-button
              >
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
                >搜索</el-button
              >
              <el-button
                class="filter-item fr"
                size="small"
                style="margin-left: 10px"
                @click="isAddDialogVisible = true"
                type="primary"
                icon="el-icon-edit"
                >新增学科</el-button
              >
            </el-form-item>
            <!-- 提示总共条数 -->
            <el-alert :title="'数据一共 ' + list.counts + ' 条'" type="info" show-icon>
            </el-alert>
          </div>
          <!-- 表格 -->
          <el-table stripe :data="list.items" style="width: 100%">
            <el-table-column align="center" width="70px" type="index" label="序号">
            </el-table-column>
            <el-table-column
              width="100px"
              align="center"
              prop="subjectName"
              label="学科名称"
            >
            </el-table-column>
            <el-table-column width="100px" align="center" prop="username" label="创建者">
            </el-table-column>
            <el-table-column  width="150px" align="center" prop="addDate" label="创建日期">
              <template slot-scope="scope">
                {{ scope.row.addDate | parseTimeByString }}
              </template>
            </el-table-column>
            <el-table-column
              width="130px"
              align="center"
              prop="isFrontDisplay"
              label="前台是否显示"
            >
              <template slot-scope="scope">
                {{ (scope.row.isFrontDisplay = "是" ? "是" : "否") }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              width="100px"
              prop="twoLevelDirectory"
              label="二级目录"
            >
            </el-table-column>
            <el-table-column align="center" width="80px" prop="tags" label="标签">
            </el-table-column>
            <el-table-column width="100px" align="center" prop="totals" label="题目数量">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="toClassiFication(scope.row)">学科分类</el-button>
                <el-button type="text" @click="toLabel(scope.row)">学科标签</el-button>
                <el-button type="text" @click="handModify(scope.row)">修改</el-button>
                <el-button type="text" @click="removeSubjects(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="subject.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.counts"
          >
          </el-pagination>
        </el-form>
      </el-card>
    </div>
    <!-- 新增弹窗----------------------------- -->
    <el-dialog
      title="新增学科"
      v-if="isAddDialogVisible"
      :visible.sync="isAddDialogVisible"
      width="35%"
    >
    <AddSubjects v-if="isAddDialogVisible" @close="isAddDialogVisible = false" @Refresh="getLIst"></AddSubjects>
      <!-- <subjects-add></subjects-add> -->
    </el-dialog>
    <!-- /新增弹窗 -->

     <!-- 修改弹窗----------------------------- -->
    <el-dialog
      title="修改学科"
      v-if="isModifyDialogVisible"
      :visible.sync="isModifyDialogVisible"
      width="35%"
    >
    <ModifySubjects v-if="isModifyDialogVisible"
     @close="isModifyDialogVisible = false"
     @Refresh="getLIst" :modify="modifyTransmit"></ModifySubjects>
      <!-- <subjects-add></subjects-add> -->
    </el-dialog>
    <!-- /修改弹窗 -->
  </div>
</template>

<script>

import AddSubjects from '@/module-hmmm/components/subjects-add.vue'
import ModifySubjects from '@/module-hmmm/components/subjects-modify.vue'
// eslint-disable-next-line no-unused-vars
import { parseTimeByString } from '@/filters/index.js'
import { list, remove as removeSubjects } from '@/api/hmmm/subjects.js'
export default {
  name: 'subjects',
  components: {
    AddSubjects,
    ModifySubjects
  },
  data () {
    return {
      subject: {
        page: 1, // 页码
        pagesize: 10, // 条数
        subjectName: '' // 搜索昵称
      },
      // 数据列表
      list: [],
      // 增加学科
      isAddDialogVisible: false,
      // 修改学科
      isModifyDialogVisible: false,

      modifyTransmit: {
        subjectName: '',
        id: null
      }
    }
  },
  mounted () {},
  created () {
    this.getLIst()
  },
  methods: {
    a () {
      this.getLIst()
    },
    // 获取学科列表
    async getLIst () {
      // console.log(this.subject)
      try {
        const { data } = await list(this.subject)
        this.list = data
        // console.log(data)
      } catch (error) {
        this.$message.error('获取失败')
        console.log(error)
      }
    },
    // 搜索信息
    handleFilter () {
      this.getLIst()
      setTimeout(() => {
        this.subject.subjectName = ''
      }, 0)
    },
    // 重置
    resetForm () {
      this.subject.subjectName = ''
    },
    // 每页条数改变触发
    handleSizeChange (val) {
      this.subject.pagesize = val
      // console.log(`每页 ${val} 条`)
      this.getLIst()
    },
    // 页数改变触发
    handleCurrentChange (val) {
      this.subject.page = val
      // console.log(`当前页: ${val}`)
      this.getLIst()
    },
    // 修改科目
    handModify (row) {
      this.isModifyDialogVisible = true
      this.modifyTransmit.subjectName = row.subjectName
      this.modifyTransmit.id = row.id
    },
    // 删除科目
    removeSubjects (row) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeSubjects({
          id: row.id
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getLIst()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 跳转学科分类
    toClassiFication (row) {
      // console.log(row)
      this.$router.push({ name: 'subjects-directorys', query: { id: row.id, name: row.subjectName } })
    },
    // 跳转学科标签
    toLabel (row) {
      this.$router.push({ name: 'subjects-tags', query: { id: row.id, name: row.subjectName } })
    }
  }
}
</script>

<style lang="less" scoped>
.app-container{
  .container-but{
    margin-left: 14px;
  }
}

</style>
